<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;"
      >
        <el-form-item prop="searchType">
          <el-select v-model="queryForm.searchType" placeholder="请选择" style="width: 100px;">
            <el-option label="全部" value />
            <el-option label="客户名称" value="1" />
            <el-option label="客户编号" value="2" />
            <el-option label="表计地址" value="3" />
            <el-option label="IMEI" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label prop="searchVal">
          <el-input v-model="queryForm.searchVal" placeholder="请输入" style="width: 100px;" />
        </el-form-item>

        <el-form-item label="抄表时间" prop="dataRange">
          <el-date-picker
            v-model="queryForm.dataRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFormSubmit">
            <d2-icon name="search" />查询
          </el-button>
          <el-button
            type="primary"
            @click="viewChart"
            v-show="queryForm.searchType == 3 || queryForm.searchType == 4"
          >
            <d2-icon name="bar-chart" />查看图表
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <split-pane :min-percent="10" :max-percent="20" :default-percent="20" split="vertical">
      <template slot="paneL">
        <my-area-tree @change="onAreaChange" />
      </template>
      <template slot="paneR">
        <d2-crud
          ref="d2Crud"
          :columns="columns"
          :data="data"
          :loading="loading"
          :pagination="pagination"
          @pagination-current-change="paginationCurrentChange"
        ></d2-crud>
      </template>
    </split-pane>
    <el-dialog :visible.sync="dialogVisible">
      <ve-line :data="chartData" :settings="chartSetting"></ve-line>
    </el-dialog>
  </d2-container>
</template>

<script>
import util from "@/libs/util";
import MyAreaTree from "@/components/my-area-tree";
import dayjs from "dayjs";
import VeLine from "v-charts/lib/line";

export default {
  name: "query",
  components: { MyAreaTree, VeLine },

  data() {
    return {
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 100,
        total: 0
      },
      queryForm: {
        areaId: "1",
        areaName: "中国",
        archivesAddress: "",
        dataRange: [
          dayjs().format("YYYY-MM-DD"),
          dayjs()
            .add(7, "day")
            .format("YYYY-MM-DD")
        ],
        customerName: "",
        customerSerialnumber: "",
        searchType: ""
      },
      columns: [],
      data: [],
      treeData: [],
      values: [],
      selectParams: {
        size: "mini"
      },
      treeParams: {
        "default-expand-all": true,
        data: [],
        props: {
          children: "children",
          label: "name",
          value: "id"
        }
      },
      dialogVisible: false,
      chartData: null,
      chartSetting: {
        labelMap: {
          value: "表数据"
        }
      }
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    //分页操作
    paginationCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.fetchData();
    },
    onAreaChange(data, node) {
      this.queryForm.areaId = data.id;
      this.queryForm.areaName = data.name;
      this.fetchData();
    },

    fetchData() {
      this.loading = true;
      this.$api
        .admin_meterData_getNBMeterHistoryPageVO({
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          areaId: this.queryForm.areaId,
          beginDate: this.queryForm.dataRange
            ? dayjs(new Date(this.queryForm.dataRange[0])).format("YYYY-MM-DD")
            : "",
          endDate: this.queryForm.dataRange
            ? dayjs(new Date(this.queryForm.dataRange[1])).format("YYYY-MM-DD")
            : "",
          customerName:
            this.queryForm.searchType == 1 ? this.queryForm.searchVal : "",
          customerSerialnumber:
            this.queryForm.searchType == 2 ? this.queryForm.searchVal : "",
          archivesAddress:
            this.queryForm.searchType == 3 ? this.queryForm.searchVal : "",
          imei: this.queryForm.searchType == 4 ? this.queryForm.searchVal : ""
        })
        .then(res => {
          let columns = [];
          res.columns.forEach(element => {
            element.title = element.name;
            columns.push(element);
          });
          this.columns = columns;
          this.data = res.data;
          this.pagination.total = res.total;
        })
        .catch(err => {
          console.log("err", err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleFormSubmit() {
      this.pagination.currentPage = 1;
      this.fetchData();
    },
    viewChart() {
      if (!this.queryForm.searchVal || this.queryForm.searchVal == "") {
        this.$message.warning("查询条件不能为空");
        return;
      }
      if (!this.queryForm.dataRange) {
        this.$message.warning("抄表时间不能为空");
        return;
      }
      this.dialogVisible = true;
      this.$api
        .admin_meterData_getNBMeterHistoryChartVO({
          areaId: this.queryForm.areaId,
          beginDate: this.queryForm.dataRange
            ? dayjs(new Date(this.queryForm.dataRange[0])).format("YYYY-MM-DD")
            : "",
          endDate: this.queryForm.dataRange
            ? dayjs(new Date(this.queryForm.dataRange[1])).format("YYYY-MM-DD")
            : "",
          archivesAddress:
            this.queryForm.searchType == 3 ? this.queryForm.searchVal : "",
          imei: this.queryForm.searchType == 4 ? this.queryForm.searchVal : ""
        })
        .then(res => {
          this.chartData = {
            columns: ["datetime", "value"],
            rows: res
          };
        });
    }
  }
};
</script>
